import './reportMessage.css'
import Add from './repComponent/add'
import React, { useState, useEffect } from 'react'
import { Table, Divider, Radio, Form, Input, Button, Select ,Popconfirm, message } from 'antd'
import http from '../../../services/http'
import Look from './repComponent/look'
const { Option } = Select;



//-------------------
const Header1 = () => {  //页首标题栏
  return (
    <div className="header1">
      <p>体检报告信息</p>
    </div>
  )
}

const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

//--------------------------------查询栏

export default function Reportmessage() {
  const [arr, setArr] = useState([])
  const [data, setData] = useState([])
  const [id, setId] = useState([])
  const [selectionType, setSelectionType] = useState('checkbox');

  useEffect(() => {
    ref()
    http({
      url: '/getadress',
    }).then((res) => {
      setArr(res)
    })
  }, []);

  const [form] = Form.useForm();

  //--------------------列表渲染
  const ref = () => {
    http({
      url: '/getlookreportpc',
    }).then((res) => {
      console.log('子组件列表数据', res);
      setData(res)
    })
  }

  //------------------
  const del = (a) => {
    http({
      url: '/delreportpc',
      data: {
        user_id: a
      }
    }).then((res) => {
      console.log(res);
      ref()
    })
  }
  //------------------删除

  //-----------------批量删除
  function confirm() {
    let array = JSON.parse("["+ id +"]")
    http({
      url: '/delbatch',
      data: {
        user_ids: array
      }
    }).then((res) => {
      console.log(res);
      ref()
    })
    console.log('id',array);
    message.success('删除成功');
  }
  
  function cancel(e) {
    console.log(e);
    message.error('已取消');
  }
  //---------------------
  //--------------表格表头
  const columns = [
    {
      title: '用户名',
      dataIndex: 'user_name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '舒张压',
      dataIndex: 'DBP',
    },
    {
      title: '收缩压',
      dataIndex: 'SBP',
    },
    {
      title: '血小板',
      dataIndex: 'BP',
    },
    {
      title: '医疗保健',
      dataIndex: 'health',
    },
    {
      title: '指数',
      dataIndex: 'indexa',
    },
    {
      title: '脉搏',
      dataIndex: 'pulse',
    },
    {
      title: '操作',
      render: ((a) => {
        return (
          <div>
            <a onClick={del.bind(this, a.user_id)}>删除</a> <Look fn={a.user_id} />
          </div>
        )
      })
    },
  ];

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      setId(`${selectedRowKeys}`)
    }
  };
  //-------------表格数据

  const onFinish = (values) => {
    console.log('查询数据', values);
    http({
      url: '/getdim',
      data: {
        user_name: values.user_name
      }
    }).then((res) => {
      setData(res)
    })
  };

  const getTable = (a) => {
    console.log('父组件数据', a);
  }

  function handleChange(value) {
    console.log('机构', value);
  }

  const onReset = () => {
    form.resetFields();
  };
  //--------------------------------查询栏

  return (
    <div id="div1">
      <Header1 />
      <div className="count">
        <div className="header2">
          <p>数据筛选</p>
          <div className="header2-1">

            <Form
              className="form1" {...layout}
              form={form}
              name="control-hooks"
              onFinish={onFinish}>
              <span>输入查询:</span>
              <Form.Item
                className="form1-1"
                name="user_name"
              >
                <Input placeholder="输入姓名" />
              </Form.Item>
              <Form.Item
                className="form1-1"
                name="org_id"
              >
                <Select
                  className="form1-2"
                  placeholder="选择机构"
                  allowClear
                  onChange={handleChange}
                >{
                    arr.map((item, index) => (<Option key={index} value={item.org_id}>{item.org_name}</Option>))
                  }
                </Select>
              </Form.Item>
              <Form.Item className="form1-3" {...tailLayout}>
                <Button
                  className="button"
                  type="primary"
                  htmlType="submit"
                >
                  查询
                </Button>
                <Button className="button" onClick={onReset}>
                  重置
                </Button>
              </Form.Item>
            </Form>

          </div>
        </div>

        <div>
          <div id="header3">
            <Add />
           
            <Button className="button" type="primary">
              <Popconfirm
                  title="确定批量删除吗?"
                  onConfirm={confirm}
                  onCancel={cancel}
                  okText="是的"
                  cancelText="不删除"
              >
                  <a href="#">删除</a>
              </Popconfirm>
            </Button>

          </div>

          <div id="header4">
            <Radio.Group
              onChange={({ target: { checkbox } }) => {
                setSelectionType(checkbox);
              }}
              value={selectionType}
            >
            </Radio.Group>
            <Divider />
            <Table
              pagination={false}
              rowSelection={rowSelection}
              rowKey='user_id'
              columns={columns}
              dataSource={data}
            />
          </div>
        </div>

      </div>
    </div>
  )
}